<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />

	<style type="text/css">
		ul,li{
			padding:0;
			margin:0;
			list-style:none;
		}

		/*main css*/
		#main{
			width:100%;
		}
		div#header img{
			width:100%;
		}
		div#header ul{
			font-size: 0;
		}
		div#header ul li{
			width:50%;
			font-size:1.6rem;
			text-align: center;
			color:#fff;
			background: #f4858e;
			display: inline-block;
			border-left:1px solid #fff;
			padding:5px 0;
		}
		div#header ul li:first-child{
			border-left:none;
		}
		div#circle-details ul li{
			padding:15px 0;
			border-bottom:1px solid #c9cacb;
			font-size:0;
		}
		div#circle-details ul li:last-child{
			border-bottom:none;
		}
		div#circle-details ul li div{
			display: inline-block;
			font-size:1.4rem;
		}
		div.headPhoto{
			padding:0 7px;
			width:20%;
		}
		div.headPhoto img{
			width: 100%;
		}
		div.details{
			width:80%;
			vertical-align: top;
			padding-right:8px;
		}
		div.userinfo{
			display: block !important;
		}
		div.userinfo span{
			display: block !important;
		}
		div.userinfo span:nth-of-type(1){
			color:#ed0f64;
			font-size:1.5rem;
			margin-bottom:3px;
		}
		div.userinfo span:nth-of-type(2){
			color:#000;
			font-size:1.4rem;
		}
		div.worksshow{
			margin-top:5px;
			display: block !important;
			border:1px solid #c9cacb;
			padding-top:5px;
		}
		div.worksshow p{
			margin:0;
			padding:0 5px;
		}
		div.worksshow div{
			display: block !important;
		}
		div.worksshow div ul{
			font-size: 0;
			padding:0 5px;
		}
		div.worksshow div ul li{
			width:32%;
			display: inline-block;
			padding:0 !important;
			margin:0;
			border:none;
			margin-left:2%;
			margin-bottom:5px;

		}
		div.worksshow div ul li:nth-of-type(3n+1){
			margin-left:0;
		}
		div.worksshow div ul li img{
			width:100%;
		}
		div.comments{
			padding:3px 5px 8px 5px;
			font-size:1.5rem;
			color:#fff;
			display: block !important;
		}
		div.comments span{
			padding-left:22px;
			float:right;
			color:#777777;
		}
		div.comments span:nth-of-type(1){
			background: url(comment.png) left center no-repeat;
			background-size:18px 18px;
			margin-left:10px;
		}
		div.comments span:nth-of-type(2){
			background: url(collect.png) left center no-repeat;
			background-size:18px 18px;
		}
		i{
			font-style:normal;
		}
	</style>
</head>
<body>

	<div id="main">
		<div id="header">
			<img src="circleback.png" />
			<ul>
				<li id="showOrder">我来晒单</li>
				<li id="shareOther">分享</li>
			</ul>
		</div>
		<div id="circle-details">
			<ul class="sharelist">
				<!-- <li>
					<div class="headPhoto">
						<img src="userhead.png" />
					</div>
					<div class="details">
						<div class="userinfo">
							<span>浅浅的蓝</span>
							<span>ID:1235678900</span>
						</div>
						<div class="worksshow">
							<p>台历收到了，才真正意识到准备半年之久的毕业行只剩下美好的回忆了，谢谢朋友们的帮助和陪伴，谢谢天天美印将这份美好长存！</p>
							<div>
								<ul>
									<li><img src="works.png" /></li>
									<li><img src="works.png" /></li>
									<li><img src="works.png" /></li>
									<li><img src="works.png" /></li>
									<li><img src="works.png" /></li>
									<li><img src="works.png" /></li>
								</ul>
							</div>
							<div class="comments">
								天天美印
								<span><a></a>15</span>
								<span><a></a>176</span>
							</div>
						</div>
					</div>
				</li> -->
				
			</ul>
			
		</div>
	</div>
	<div id="footer">
		
	</div>
</body>
<script type="text/javascript">
    var listobj;
    var index_in=0;
    
   // var page = 0 ;
	$(document).ready(function(){
		$("div.userinfo").css("height",$("div.headPhoto img").width());
		$("div.headPhoto img").css("height",$("div.headPhoto img").width());
		
    });
    
    function callback(iosData){
        var showid = iosData.showid;
        var type = iosData.type;
        api.log(showid);
        api.log(type);
        var comdiv=$('.comments[showid="'+showid+'"]');
        if(type==1){
            //点赞
            var num = parseInt(comdiv.find(".zannum").html());
            comdiv.find(".zannum").html(1+num);

        }else{
            var num = parseInt(comdiv.find(".disnum").html());
            comdiv.find(".disnum").html(1+num);
        }
    }


    function gotozan(showid,sender){
        var url ="http://ttmy.len.so/app/appapi/comment";
        
        $.ajax({
               url: url,
               type:'get',
               dataType:'JSONP',
               data:{"showid":showid,"sender":sender,"zan":"1"},
               success: function(){
               
               }
        });
    	
        
    }
var sender = api.getUid();//用户ID，要重新获取
 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	    	
	        var className=$(e.target).attr("class");

	        if(className=='tozan'){
	        	
	        	//var $parent = $(e.target).parent();
	        	var zanlist = $(e.target).attr("zanlist");//点赞的用户ID，通过showid获取
        		var showid = $(e.target).attr("showid");
        		if(zanlist.indexOf(','+sender+',')==-1){//没有点过赞
			        //参数：showid:'',sender:'',zan:'1'       
			        $(e.target).attr("zanlist",zanlist+sender+",");
			        //点赞数+1
			        var zannum = parseInt($(e.target).find("i").html());
			        zannum++;
			        $(e.target).find("i").html(zannum);
			        gotozan(showid,sender);
                    api.showToast("点赞成功");
			    }else{
			        
                    api.showMessage("您已经点过赞了!");
		        }
              }
              if(className == 'zannum'){
                    var zanlist = $(e.target).parent().attr("zanlist");//点赞的用户ID，通过showid获取
                    var showid = $(e.target).parent().attr("showid");
                    if(zanlist.indexOf(','+sender+',')==-1){//没有点过赞
                        //参数：showid:'',sender:'',zan:'1'
                        $(e.target).parent().attr("zanlist",zanlist+sender+",");
                        //点赞数+1
                        var zannum = parseInt($(e.target).html());
                        zannum++;
                        $(e.target).html(zannum);
                        gotozan(showid,sender);
                        api.showToast("点赞成功");
                    }else{
              
                        api.showMessage("您已经点过赞了!");
                    }
              }
              if(className == 'tozan_1'){
              var zanlist = $(e.target).parent().attr("zanlist");//点赞的用户ID，通过showid获取
              var showid = $(e.target).parent().attr("showid");
              if(zanlist.indexOf(','+sender+',')==-1){//没有点过赞
              //参数：showid:'',sender:'',zan:'1'
              $(e.target).parent().attr("zanlist",zanlist+sender+",");
              //点赞数+1
              var zannum = parseInt($(e.target).next().html());
              zannum++;
              $(e.target).next().html(zannum);
              gotozan(showid,sender);
              api.showToast("点赞成功");
              }else{
              
              api.showMessage("您已经点过赞了!");
              }
              }
              if(className=='tocom'){
                var commentIndex = $(e.target).attr("index");
              //api.pushINT(commentIndex);
              //api.logObject(listobj);
                api.pushToxiuDetail("xiuDetail.html",listobj[commentIndex]);
              
              }
              if(className=='tocom_01'){
              var commentIndex = $(e.target).parent().attr("index");
              //api.pushINT(commentIndex);
              //api.logObject(listobj);
              api.pushToxiuDetail("xiuDetail.html",listobj[commentIndex]);
              
              }
              if(className=='disnum'){
              var commentIndex = $(e.target).parent().attr("index");
              //api.pushINT(commentIndex);
              //api.logObject(listobj);
              api.pushToxiuDetail("xiuDetail.html",listobj[commentIndex]);
              
              }
              
              if(e.target.id =="showOrder"){
                  api.pushToVC("showOrder");
              }
              
              if(e.target.id =="shareOther"){
                  api.pushToVC("shareOther");
              }
	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
    
    function loadingPage(page){
        
        $.ajax({
               url:"http://ttmy.len.so/app/appapi/sharelist/page/"+page,
               type:'get',
               dataType:'JSONP',
               //data:{name:value}
               
               success: function(data){
               //console.log(data[0]);
               
               if(data){
               if(listobj == '' || listobj == undefined || listobj == null)
               {
               listobj = data;
               }else
               {
               var pinjie=listobj.concat(data);
                listobj = pinjie;
               }
               
               for(var i in data){
               var list = data[i];
               //console.log(list);
               var liststr = '<li >'+
               '<div class="headPhoto">';
               if(list.face == '' || list.face == undefined || list.face == null){
               liststr += '<img src="uidhead.png" />';
               
               }else{
               liststr +='<img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+list.face+'?imageView2/2/h/100" />';
               }
               
               liststr += '</div>'+
               '<div class="details">'+
               '<div class="userinfo">'+
               '<span>'+list.name+'</span>'+
               '<span>ID:'+list.uid+'</span>'+
               '</div>'+
               '<div class="worksshow">'+
               '<p>'+list.content+'</p>'+
               '<div>'+
               '<ul>';
               for(var j in list.pics){
               var pic = list.pics[j];
               liststr += '<li><img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+pic+'?imageView2/2/h/200" /></li>';
               }
               
               liststr +='</ul>'+
               '</div>'+
               '<div class="comments" showid="'+list.id+'">'+
               '天天美印'+
               '<span class="tocom" index="'+index_in+'"><a class="tocom_01"></a><i class="disnum">'+list.dis_num+'</i></span>'+
               '<span class="tozan" zanlist="'+list.zanlist+'" showid="'+list.id+'"><a class="tozan_1"></a><i class="zannum">'+list.zan_num+'</i></span>'+
               '</div>'+
               '</div>'+
               '</div>'+
               '</li>';
               index_in++;
               $(".sharelist").append(liststr);
               api.endRefresh();
               }
               }
               }
               });
    }
</script>
</html>